<!DOCTYPE html>
<html lang="en" xmlns:m="http://www.w3.org/1998/Math/MathML">
    <head>
        <!-- Meta information -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <meta charset="utf-8"></meta>
        <meta name="description" content=""></meta>
        <meta name="author" content=""></meta>

        <title>Kinomics</title>

        <!-- style sheets -->
        <link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
        <link href="../js/qualityControl/UIsupport/nouislider.css" rel="stylesheet"></link>
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia"></link>
        <link rel="stylesheet" href="../js/qualityControl/UIsupport/jqmath-0.2.0.css"></link>

        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
        </style>

        <!-- jQuery load this at top since everything depends on it-->
        

        <!-- TODO: update these icons -->
        <link rel="shortcut icon" href="./favicon.ico">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png"></link>
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png"></link>
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png"></link>
        <link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png"></link>
    </head>
    <body class=" hasGoogleVoiceExt">
        <!-- Navigation bar at the top of the screen -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding... -->    <a class="brand">Kinomics Toolbox</a>

                    <!-- navigate between tabs -->
                    <div class="nav-collapse in collapse" style="height: auto; ">
                        <ul class="nav">
                            <li class="active"><a href="#home" data-toogle="tab" id="tag1">Home</a></li>
                            <li><a href="#fileUpload" data-toogle="tab" id="tag3">Data</a></li>
                            <li><a href="#qualtityControl" data-toogle="tab" id="tag2">Data Visualization</a></li>
                            <!-- TODO: change to more logical view Login tablet/phone-->
                            <li class="hidden-desktop">
                                <nav class='btn-group'>
                                    <!-- Title -->    
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                        <i class="icon-user"></i> <span class="username">Login</span>
                                        <span class="caret"></span>
                                    </a>
<!-- TODO: fix this stuff for the iphone login... -->
                                    <!-- Options -->
                                    <!-- <ul id="user-access-options" class="dropdown-menu">
                                        <li id='auth'><a href="javascript:fuse.authenticate(function(){});">Authenticate with Google Account</a>

                                        </li>
                                        <li class="divider"></li>
                                        <li><a href="javascript:s3dbfu.showmodal('loginUN');void(0);">S3DB with User Name</a>

                                        </li>
                                        <li><a href="javascript:s3dbfu.showmodal('loginAK');void(0);">S3DB with API Key</a>

                                        </li>
                                    </ul> -->
                                </nav>
                            </li>
                            <!-- TODO: change to more logical view Choose Database Phone/Tablet-->
                            <!-- <li class="hidden-desktop">
                                <nav id="tableSwitch" class="btn-group"> -->
                                    <!-- Title -->
                                    <!-- <button class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                        <span class="curData"></span>
                                        <span class="caret"></span>
                                    </button> -->
                                    <!-- Options Phone/Tablet-->
                                <!--     <ul class="dropdown-menu dbSelector">
                                    </ul>
                                </nav>
                            </li> -->

                        </ul>
                        <!-- Login desktop-->
                        <nav class='btn-group pull-right visible-desktop'>
                            <!-- Title -->    
                            <!-- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="icon-user"></i> <span class="username">Login</span>
                                <span class="caret"></span>
                            </a> -->

                            <!-- Options -->
                            <!-- <ul id="user-access-options" class="dropdown-menu">
                                <li id='authFT'><a>Authenticate with Google Account</a>

                                </li>
                                <li class="divider"></li>
                                <li><a href="javascript:s3dbfu.showmodal('loginUN');void(0);">S3DB with User Name</a>

                                </li>
                                <li><a href="javascript:s3dbfu.showmodal('loginAK');void(0);">S3DB with API Key</a>

                                </li>
                            </ul> -->
                        </nav>
                        <!-- Choose Database desktop-->
                        <!-- <nav id="tableSwitch" class="btn-group pull-right visible-desktop">
                            
                            <button class="btn dropdown-toggle pull-right" data-toggle="dropdown" href="#">
                                <span class="curData"></span>
                                <span class="caret"></span>
                            </button>
                            
                            <ul class="dropdown-menu dbSelector">
                            </ul>
                        </nav> -->
                    </div>
                </div>
                <script id="template-upload" type="text/x-tmpl">
                    { %
                        for (var i = 0, file; file = o.files[i]; i++) { %
                        } < tr class = "template-upload fade" > < td class = "preview" > < span class = "fade" > < /span></td > < td class = "name" > < span > { %= file.name %
                        } < /span></td > < td class = "size" > < span > { %= o.formatFileSize(file.size) %
                        } < /span></td > { %
                            if (file.error) { %
                            } < td class = "error"
                            colspan = "2" > < span class = "label label-important" > { %= locale.fileupload.error %
                            } < /span> {%=locale.fileupload.errors[file.error] || file.error%}</td > { %
                            } else if (o.files.valid && !i) { %
                            } < td > < div class = "progress progress-success progress-striped active"
                            role = "progressbar"
                            aria - valuemin = "0"
                            aria - valuemax = "100"
                            aria - valuenow = "0" > < div class = "bar"
                            style = "width:0%;" > < /div></div > < /td>
                        <td class="start">
                        {% if (!o.options.autoUpload) { %}
                            <button class="btn btn-primary">
                                <i class="icon-upload icon-white"></i > < span > { %= locale.fileupload.start %
                            } < /span>
                            </button > { %
                            } %
                        } < /td>
                    {% } else { %}
                        <td colspan="2"></td > { %
                        } %
                    } < td class = "cancel" > { %
                        if (!i) { %
                        } < button class = "btn btn-warning" > < i class = "icon-ban-circle icon-white" > < /i>
                                <span>{%=locale.fileupload.cancel%}</span > < /button>
                        {% } %}
                        </td > < /tr>
                {% } %}
                </script>
                <script id="template-download" type="text/x-tmpl">
                    { %
                        for (var i = 0, file; file = o.files[i]; i++) { %
                        } < tr class = "template-download fade" > { %
                            if (file.error) { %
                            } < td > < /td>
                        <td class="name"><span>{%=file.file_name%}</span > < /td>
                        <td class="size"><span>{%=o.formatFileSize(parseInt(file.file_size))%}</span > < /td>
                        <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span > { %= locale.fileupload.errors[file.error] || file.error %
                            } < /td>
                    {% } else { %}
                        <td class="preview"></td > < td class = "name" > { %
                                if (file.download_url == '#') { %
                                } { %= file.value %
                                } { %
                                } else { %
                                } < a href = "{%=file.download_url%}"
                                title = "{%=file.file_name%}"
                                download = "{%=file.file_name%}"
                                target = "_blank" > { %= file.file_name %
                                } < /a>
                        {% } %}
                        </td > < td class = "size" > < span > { %= o.formatFileSize(isNaN(parseInt(file.file_size)) ? '' : parseInt(file.file_size)) %
                                } < /span></td > < td colspan = "2" > < /td>
                    {% } %}
                        <td class="delete">
                            <button class="btn btn-danger" data-type="DELETE" data-url="{%=s3dbfu.s3dburl()%}/multiupload.php ? key = { %= file.apikey %
                                } & statement_id = S { %= file.statement_id %
                                }
                                ">
                                <i class="
                                icon - trash icon - white "></i>
                                <span>{%=locale.fileupload.destroy%}</span>
                            </button>
                        </td>
                    </tr>
                {% } %}
                </script>
            </div>
        </div>

        <!-- Location of all the tabs in the document -->
        <div class="row"><div class="offset1 span10"><div id="errors"></div></div></div>
        <div id="main" class="container tab-content">
            <!-- Home Tab -->
            <div id="home" class="tab-pane active hero-unit">
                <h1>Kinomic Data Analysis and Management</h1><br />
                <p>University of Alabama at Birmingham
                    <br>Division of Informatics
                    <br>Department of Radiation Oncology
                    <br>Department of Pathology
                    <br><a href="http://ibl.github.io" target="_blank">Integrative Bioinformatics Laboratory</a>
                    <br /><br /> Source code avaliable at: <a href="https://github.com/kinome/kinome.github.io" target="_blank">github.com</a>
                </p>
            </div>

            <!-- Quality control tab -->
            <div class="tab-pane container" id="qualtityControl">
                <h1>Quality Control</h1>
                <!-- TODO: dynamically generate this -->
                <well class="well span11" id='tempQCMessage'>Please select at least one file to add to analysis.</well>
            </div>

            <!-- File manager tab -->
            <div class="tab-pane" id="fileUpload">
                <div id="s3dbfu-msgs"></div>
                <h1>Data Manager</h1>
                <div id="homediv">
                    <div class="container">
                        <!-- Default display -->
                        <div class="well span11" id="defaultFile">Please login to either Google or S3DB and select appropriate database to save and display files.<br /></div>

                        <!-- Logged in display -->
                        <form id="fileupload" action="" method="POST" enctype="multipart/form-data">
                            <div class="row">
                                <!-- Side Navagation bar-->
                                <div class="span3">
                                    <div class="well fileOpts" id='colBrowse'>
                                    </div>
                                </div>

                                <!-- File Upload options panel - S3DB-->
                                <div class="span8">
                                    <div class="well fileOpts" id="S3DBupload">
                                        <h4>S3DB</h4>
                                        <div class="row fileupload-buttonbar originRow">
                                            <div class="span">
                                                <!-- Add files -->    
                                                <span class="btn btn-success fileinput-button inputBut">
                                                    <span><i class="icon-plus icon-white"></i> Add files...</span>
                                                    <input type="file" name="files[]" class="hiddenBut" multiple></input>
                                                </span>

                                                <!-- start multiple upload -->
                                                <!-- <button type="submit" class="btn btn-primary start"><i class="icon-upload icon-white"></i><span> Start upload</span></button> -->

                                                <!-- Cancel Upload -->
                                                <!-- <button type="reset" class="btn btn-warning cancel"><i class="icon-ban-circle icon-white"></i><span> Cancel upload</span> -->

                                                <!-- </button> -->
                                            </div>

                                            <!-- Progress bar for upload -->
                                            <div class="span5 fileupload-progress fade">
                                                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                                    <div class="bar" style="width:0%;"></div>
                                                </div>
                                                <div class="progress-extended">&nbsp;</div>
                                            </div>
                                        </div>
                                        <div class="fileupload-loading"></div>
                                        <br />
                                        <div class="row">
                                            <div class="span">
                                                <!-- Add files -->    
                                                <p class="currentAnaDisp"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- File Upload options panel - Fusion Tables-->
                                <div class="span9">
                                    <div class="well fileOpts" id="fusionUpload">
                                        <h4>Fusion Tables</h4>
                                        <div class="row fileupload-buttonbar batch">
                                            <div class="span">
                                                <!-- Add files -->    
                                                <span class="btn btn-success inputBut">
                                                    <span><i class="icon-plus icon-white"></i> Add files...</span>
                                                    <input type="file" name="files[]" class="hiddenBut" id= "FUSEsub" multiple></input>
                                                </span>
                                                <!-- start multiple upload -->
                                                <button type="hidden" class="btn btn-primary start" id="multUp"><i class="icon-upload icon-white"></i><span> Start upload</span></button>
                                            </div>
                                        </div>
                                        <div class="row fileupload-buttonbar analysis">
                                            <div class="span">
                                                <!-- Add files -->    
                                                <!-- <span class="btn btn-success inputBut">
                                                    <span><i class="icon-plus icon-white"></i> New Analysis...</span>
                                                    <button class="hiddenBut" id= "NEWanalysis" multiple></input>
                                                </span> -->
                                            </div>
                                        </div>
                                        <br />
                                        <div class="row">
                                            <div class="span">
                                                <!-- Add files -->    
                                                <p class="currentAnaDisp"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Table -->
                            <div id=tableDiv class="row">
                                <div class="span12">
                                    <table role="presentation" class="table table-striped" id="fileTable">
                                        <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>
                                    </table>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        <!-- Javascript placed at the end of the document so the pages load faster
        -->
        <div id="javascripts">
            <!-- Major Packages -->
            <script src="../js/general/jquery-1.7.2.min.js"></script>
            <script src="../js/bootstrap/js/bootstrap.min.js"></script>

            <!-- Support Packages -->
            <script src="../js/qualityControl/UIsupport/jquery.nouislider.js"></script>
            <script src="../js/qualityControl/UIsupport/jqmath-etc-0.2.0.min.js"></script>
            <script src="https://apis.google.com/js/client.js?onload=OnLoadCallback"></script>
            <script type="text/javascript" src="../js/general/jsapi.js"></script>

            <!-- My Packages -->
            <script src="../js/general/nameSpace.js"></script>
            <script src="../js/general/barcodeProto.js"></script>
            <script src="../js/general/workersPackage.js"></script>
            <script src="../js/general/amdjs_1.1.0.js" type="text/javascript"></script>
            <script src="./publicqcDA.js"></script>
            <script src="../js/fileManagement/fmDA.js"></script>
            <script src="./fileManagement/fmDA_FT.js"></script>
<!--            <script src="../js/fileManagement/fmDA_s3db.js"></script> -->
            <script src="./fileManagement/fusionTables.js"></script>
<!--         <script src="js/fileManagement/fileUploadManager.js"></script> -->

            <!-- UI -->
            <script src="../js/qualityControl/qcUI.js"></script>
            <script src="./fileManagement/fmUI.js"></script>

            
            <!-- <script src="js/general/client.js" gapi_processed="true"></script> -->


            <!-- S3DB/filemanagement form -->
        <!--    <script src="js/fileManagement/s3dbInferface.js"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.ui.widget.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/tmpl.min.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/load-image.min.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.iframe-transport.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.fileupload.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.fileupload-fp.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/jquery.fileupload-ui.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/master/js/locale.js"
            type="text/javascript"></script>
            <script src="https://raw.github.com/ebadedude/S3DB-File-Upload/f893461cf3f9e55fa2c12a5536abc17cb7ab962b/s3dbfu.js"
            type="text/javascript"></script>
            -->
            <!-- Makes the input botton invisible -->
            <style type="text/css">
                .inputBut {
                    overflow:hidden;
                    position:relative;
                    cursor: pointer;
                    _cursor: pointer;
                }
                .hiddenBut {
                    z-index: 999;
                    line-height: 0;
                    font-size: 5px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    height:100%;
                    width:100%;
                    opacity: 0;
                    filter: alpha(opacity=0);
                    -ms-filter:"alpha(opacity=0)";
                    cursor: pointer;
                    _cursor: pointer;
                    margin: -200;
                    padding:-200;
                }
            </style>

            <script src="../js/general/wasInline.js"></script>

        </div>
    </body>

</html>
